
/* 面向对象技巧:
+ 你在完成功能的时候
  => 定义变量: 改成属性 this.xxx = yyy 书写在构造函数体内
  => 书写函数: 改成方法 直接书写在原型上, 原先操作的变量全部改成 this.xxx
  => 方法内的变量:
    -> 如果你需要在别的函数内使用, 那么变成 this.xxx 书写在构造函数体内 constructor内
    -> 如果你只需要在当前函数内使用, 那么直接定义变量即可
 */

 // 需要拿到一个机器 这个机器可以生产多个对象 
 // 类                  对象

 // 类 
 // 属性 :
 //     1. banner 每个轮播 
 //     2. imgs  这个轮播中承载图片的大盒子
 //     3. btns  承载按钮的大盒子 
 //     4.  timer  第几个定时器 
 //     5. index 第几张图片  

 // 方法  
 //     1. 生成焦点 

 //     2. 展示第几张图片  多个地方用到这个函数  
 //     第几张图片显示 第几个按钮高亮  
 //     其它图片隐藏  其它按钮不高亮 

 //     3. 自动轮播   用到第二个函数  页码+1 然后展示页码+1 对应的图片 

 //     4. 鼠标移入图片  停止轮播  
//      5.点击  
//            左右按钮   左 上一张  右下一张   用到第二个函数 展示上一张下一张
//             图片的焦点  点击哪个焦点 对应的图片显示   
//             也用到第二个函数  点击哪个焦点  展示对应的图片 

// this.index 就是当前的页码  

// 上一张    当前这一张 隐藏 按钮取消高亮  删除 class="active "上一张显示 按钮高亮 添加 class="active
// 下一张     当前这一张 隐藏 按钮取消高亮   删除 class="active" 下一张显示 按钮高亮 添加 class="active
// 某一张      当前这一张 隐藏 按钮取消高亮  删除 class="active" 某一张显示 按钮高亮 添加 class="active


//      有可能是 页码--
//      有可能是 页码++





class Banner{
    constructor(selector,options = {}){
        // 获取第几个轮播
        this.banner = document.querySelector(selector);
        // 获取承载图片的盒子
        this.imgBox = this.banner.querySelector('.imgBox');
        // 获取按钮的盒子 
        this.btnBox = this.banner.querySelector('.pointBox');
        // 第几个定时器 
        this.timer = 0;
        // 第几张图片 
        this.index = 0;

        // 用户自定义速度
        this.options = options;

        //如果用户传递了动画过度 时间 每个img都要按照这个时间过度
        // 遍历所有的img 
        // 重新给样式赋值 
        for(let i=0;i<this.imgBox.children.length;i++){
            this.imgBox.children[i].style.transition = `all ${this.options.action /1000 || 0.3 }s linear`
        }

        // 调用 生成按钮的函数
        this.setPoint();
        // this.changePage(-8);
        this.autoplay();
        this.overOut();
        this.bindEvent();
    }


    //方法一
    // 生成焦点 

    // 判断你承载图片的盒子有几张图片  
    // 有几张图片就生成多少个焦点
    // 如何生成 
    // 创建元素节点   document.createElement('li')
    //因为默认第一个图片显示所以我们按个第一个li 高亮
    // 如何高亮  li的class是active 就会高亮 

    // 最后把li 插入到承载焦点盒子的内容的尾部

    setPoint(){
        // 有几张图片   也就是焦点的个数
        const num =  this.imgBox.children.length;
        // 有几张图片就循环多少次   

        for(let i=0;i<num;i++){
            // 每次创建一个li元素标签 
            const li = document.createElement('li');
            li.classList.add('btn');
            if(i===0){  // 默认第一个li 按钮高亮 
                li.classList.add('active')
            }
            li.dataset.id = i;
            // 把新建的li 插入到 指定元素内部的结尾
            this.btnBox.appendChild(li);

        }
    }
    // 切换到上一张  下一张 某一张 共同使用这一个方法  
    // 通过形参判断 你到底执行什么操作 
    // 约定 
    // 形参 true  下一张 
    // 形参 false 上一张
    // 形参 数字   某一张
    changePage(xx){
        // 在切换上一张 或者  下一张  或者 某一张 
        // 之前 需要将当前显示的图片隐藏  按钮取消高亮   
        // this.index 是当前的页码 
        this.imgBox.children[this.index].classList.remove('active');
        this.btnBox.children[this.index].classList.remove('active');

        if(xx === true){
            this.index++; //页码+1
        }
        else if(xx === false){
            this.index--; // 页码-1
        }
        else{
            // 如果xx 是数字 直接赋值给this.index
            this.index = xx;
        }

        // 在高亮 或者显示以前 判断是否越界 

        //  上一张     432104321043210
        // 下一张      012340123401234
        if(this.index<0) this.index = this.imgBox.children.length-1;
        if(this.index>=this.imgBox.children.length) this.index = 0;
        this.imgBox.children[this.index].classList.add('active');
        this.btnBox.children[this.index].classList.add('active');



        

    }


    // 自动轮播 
    // 每隔多长时间切换下一张 
    autoplay(){
        this.timer = setInterval(()=>{
            this.changePage(true); // 调用自己另外的方法 切换下一张 
            // 参数true 代表切换下一张 
        },this.options.speed || 500)
    }


    // 移入图片 停止轮播  移出开始轮播 

    overOut(){
        // 给大区域绑定两个事件 移入移出事件 
        this.banner.addEventListener('mouseover',()=>{clearInterval(this.timer)});
        this.banner.addEventListener('mouseout',()=>{this.autoplay()});

    }

    // 事件委托 
    bindEvent(){
        // 给父元素绑定事件  
        this.banner.addEventListener('click',e=>{
                // 获取事件目标 前提拿到事件对象 事件对象.target
                var e = e || window.event;
                if(e.target.className === 'prev'){
                    this.changePage(false);
                }

                if(e.target.className === 'next'){
                    this.changePage(true);
                }

                if(e.target.className === 'btn'){
                    // alert('你点的是按钮'+(e.target.dataset.id-0))
                    this.changePage(e.target.dataset.id-0);
                }

        })
    }

}
